<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒表</title>
    <script src="JS/Handline.js"></script>
    <script src="JS/ItcastArc.js"></script>
    <script src="JS/Pointer.js"></script>
    <style>
        .back {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

        .button {
            display: flex;
            justify-content: center;
            margin: 0 auto;
        }

        .time {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="button">
        <div class="time"></div>
        <button class="begin">开始</button>
        <button class="stop">暂停</button>
        <button class="reset">复位</button>
    </div>

    <div class="back">
        <canvas class="can"></canvas>
    </div>

    <script>
        let begin = document.querySelector('.begin');
        let stop = document.querySelector('.stop');
        let reset = document.querySelector('.reset');
        let time = document.querySelector('.time');


        let canvas = document.querySelector('.can');
        let ctx = canvas.getContext('2d');

        canvas.width = 500;
        canvas.height = 500;

        //时钟表盘
        let arc = new ItcastArc({
            x: canvas.width / 2,
            y: canvas.height / 2,
            fillStyle: '#FFF',
            strokeStyle: '#ccc',
            startAngle: 0,
            endAngle: 360,
            r: 150
        });

        //分钟刻度线绘制
        let minuteline = new Handline({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: -90
        });

        //小时刻度线绘制
        let hourline = new Handline({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: -90,
            line: 135,
            strokeStyle: 'black',
        });


        //使数字12在最上边
        function num() {
            hourline.angle = -60;
            //表盘数字
            for (let i = 1; i <= 12; i++) {
                ctx.save();
                let distant = hourline.line - 10;
                //控制上面半边数字与刻度线的距离
                if ((i > 0 && i < 3) || (i > 9 && i < 13)) {
                    distant = hourline.line - 15;
                }

                ctx.translate(canvas.width / 2, canvas.height / 2);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.font = "20px'微软雅黑'";
                ctx.strokeText(i, distant * (Math.cos(hourline.angle * Math.PI / 180)), distant * (Math.sin(hourline.angle * Math.PI / 180)))
                hourline.angle += 30;
                ctx.restore();
            }
        };

        //指针中央
        let handcenter = new ItcastArc({
            x: canvas.width / 2,
            y: canvas.height / 2,
            fillStyle: '#000',
            startAngle: 0,
            endAngle: 360,
            r: 5
        });

        let h_angle = -90;
        let m_angle = -90;
        let s_angle = -90;

        //时针
        let h_pointer = new Pointer({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: h_angle,
            length: 50
        });

        //分针
        let m_pointer = new Pointer({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: m_angle,
            strokeWidth: 2,
            strokeStyle: 'green',
            length: 80
        });

        //秒针
        let s_pointer = new Pointer({
            x: canvas.width / 2,
            y: canvas.height / 2,
            angle: s_angle,
            strokeWidth: 1,
            strokeStyle: 'red',
            length: 100
        });

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //表盘绘制
            arc.render(ctx);
            //刻度绘制
            for (let i = 1; i <= 60; i++) {
                minuteline.render(ctx);
                minuteline.angle += 6;
            };
            for (let i = 1; i <= 12; i++) {
                hourline.render(ctx);
                hourline.angle -= 30;
            }
            //表盘中央
            handcenter.render(ctx);
            //指针绘制
            h_pointer.angle = h_angle;
            m_pointer.angle = m_angle;
            s_pointer.angle = s_angle;

            s_pointer.render(ctx);
            m_pointer.render(ctx);
            h_pointer.render(ctx);
            console.log(s_angle);
            num();
        };

        var s = 0;
        var m = 0;
        var h = 0;
        draw();
        time.innerHTML = h + '时' + m + '分' + s + '秒';

        function timing() {
            let startTime = Date.now();
            s++;
            if (s >= 60) {
                s = 0;
                m++;
                if (m >= 60) {
                    m = 0;
                    h++;
                }
            };
            time.innerHTML = h + '时' + m + '分' + s + '秒';

            h_angle = -90 + h * 6 + m / 10 + s / 60;
            m_angle = -90 + m * 6 + s / 10;
            s_angle = -90 + s * 6;

            draw();


            loop();

            function loop() {
                const now = Date.now();
                if (now - startTime >= 1000) {
                    timing();
                    return;
                }
            }
            requestAnimationFrame(loop);
        };


        begin.addEventListener('click', function () {
            timer = setInterval(timing, 1000);
            begin.disabled = true;
        });

        stop.addEventListener('click', function () {
            clearInterval(timer);
            begin.disabled = false;

        });

        reset.addEventListener('click', function () {
            begin.disabled = false;

            s = 0;
            m = 0;
            h = 0;
            time.innerHTML = h + '时' + m + '分' + s + '秒';
            clearInterval(timer);
            h_angle = -90 + h * 6 + m / 10 + s / 60;
            m_angle = -90 + m * 6 + s / 10;
            s_angle = -90 + s * 6;

            draw();
        })
    </script>
</body>

</html>